<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
window.onload=function(){
    var cancas=document.getElementById("canvas");
    var cx=cancas.getContext("2d");
    cx.fillStyle="rgba(221, 141, 154,0.5)";
    cx.strokeStyle="rgba(221, 141, 154,0.5)"
  cx.translate(300,100)
  cx.globalCompositeOperation="lighter";
 for(var i=0;i<200;i++){
    cx.translate(40,45)
    cx.rotate(Math.PI/10);
    cx.scale(0.95,0.95)
    cx.fillRect(0,0,150,80)
    cx.fill();

 }











}
    </script>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px" style="background-color: #ccc;"></canvas>
</body>
</html>